$(function () {
    introEditor();
    //当鼠标聚焦到用户名输入框时给出输入规则提示
    $("#username").focus(function () {
        $("#unm_tips").html("用户名应由5到15个数字、字母、下划线组成")
    });
    //当焦点离开输入框时采用正则表达式判断用户名输入规则是否正确
    $("#username").blur(function () {
        let regExp = new RegExp("^[a-zA-Z]\\w{5,15}$");
        let username = $("#username").val();
        if (username.trim() != "") {//如果输入框不为空
            if (regExp.test(username)) {//如果符合输入规则，则清空提示框，并进行用户名查重
                usernameCheck();
            } else {//如果不正确则提示用户
                $("#unm_tips").html("该用户名不符合规范，请重新输入");
                flag = false;
            }
        } else {
            $("#unm_tips").html("用户名不能为空！");
            flag = false;
        }

    });
    //当鼠标聚焦到密码输入框时给出输入规则提示
    $("#password").focus(function () {
        $("#psd_tips").html("密码应由5到15个数字、字母、下划线组成");
    });
    //当鼠标从密码输入框失焦时判断输入是否符合正则表达式规则
    $("#password").blur(function () {
        let regExp = new RegExp("^[a-zA-Z]\\w{5,15}$");
        let password = $("#password").val();
        if (password.trim() != "") {
            if (regExp.test(password)) {
                $("#psd_tips").html("");//如果符合则清空提示框
                flag = true;
            } else {//不符合则给出提示
                $("#psd_tips").html("该密码不符合规范，请重新输入");
                flag = false;
            }
        } else {
            $("#psd_tips").html("密码不能为空！");
            flag = false;
        }

    });

    $("#phone").change(function () {
        if ($("#phone").val() != "") {
            $("#phone_tips").html("");
            flag = true;
        }
    });
    //当鼠标从电话输入框失焦时判断输入是否符合正则表达式规则
    $("#phone").blur(function () {
        let regExp = new RegExp("^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$");
        let phone = $("#phone").val();
        if (phone.trim() != "") {
            if (regExp.test(phone)) {//如果符合则清空提示框
                $("#phone_tips").html("");
                flag = true;
            } else {//不符合则给出提示
                $("#phone_tips").html("该电话号码不存在，请重新核对");
                flag = false;
            }
        } else {
            $("#phone_tips").html("手机号不能为空！");
            flag = false;
        }

    });
    //当鼠标聚焦在验证码输入框时清空验证码输入框提示
    $("#codeipt").focus(function () {
        $("#code_tips").html("");
    });
    $("#codeipt").blur(function () {
        let regex = new RegExp("^[a-zA-z0-9]{4}$");
        let code = $("#codeipt").val();
        if (regex.test(code)) {
            $("#code_tips").html("");
            flag = true;
        }
        else{
            $("#code_tips").html("请输入4位有效验证码");
            flag = false;
        }
    });
    $("#intro").change(function () {
        $("#intro_tips").html("");
    });
    //当鼠标离开自我介绍时对输入框进行判断
    $("#intro").blur(function () {
        let intro = $("#intro").val();
        if (intro == ""){
            $("#intro_tips").html("自我评价不能为空!");
            flag = false;
        }
    });
    $("#birth").change(function () {
        if ($("#birth").val()!=""){
            $("#birth_tips").html("");
            flag = true;
        }
    });
    $("#birth").blur(function () {
        if ($("#birth").val()==""){
            $("#birth_tips").html("请选择您的生日！");
            flag = false;
        }
    });
});
var flag = true;//定义一个标志符以确定注册输入框状态
var intro_editor;//初始化自我介绍富文本编辑器
//创建一个富文本编辑器
function introEditor() {
    let E = window.wangEditor;
    intro_editor = new E('#intro_editor');
    let intro = $('#intro');
    // intro_editor.customConfig = intro_editor.customConfig ? intro_editor.customConfig : intro_editor.config;
    intro_editor.config.onchange = function (html) {
        // 第二步，监控变化，同步更新到 textarea
        intro.val(html);
    };
    // 配置 server 接口地址（servlet请求路径）
    intro_editor.config.uploadImgServer = '/editor/upload';
    // editor2.config.uploadImgShowBase64 = true;//使用base64保存图片
    intro_editor.config.showLinkImg = false;//隐藏网络图片按钮
    intro_editor.config.uploadFileName = "img";//向后端传递参数接收的字段名

    intro_editor.config.withCredentials = true;
    // 将图片大小限制为 5M
    intro_editor.config.uploadImgMaxSize = 5 * 1024 * 1024;
    // 限制一次最多上传 5 张图片
    intro_editor.config.uploadImgMaxLength = 5;

    intro_editor.config.uploadImgHooks = {

        // 图片上传并返回了结果，图片插入已成功之后触发
        success: function (xhr) {
            console.log('success', xhr)
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function (xhr, editor, resData) {
            console.log('fail', resData)
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function (xhr, editor, resData) {
            console.log('error', xhr, resData)
        },
        // 上传图片超时
        timeout: function (xhr) {
            console.log('timeout');
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function (insertImgFn, result) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // result 即服务端返回的接口
            console.log('customInsert', result.url);

            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            insertImgFn(result.url);
            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    };
    intro_editor.create();

    // 第一步，初始化 textarea 的值
    intro.val(intro_editor.txt.html());
}

//用户名查重
function usernameCheck() {
    let username = $("#username").val();
    console.log(username);
    $.ajax({
        url: "/check/username",
        type: "post",
        data: {"username": username},
        dataType: "text",
        success: function (data) {
            console.log(data + ":" + typeof data);
            if (data == "true"){//如果不为空，则该用户名被已占用，true
                $("#unm_tips").html("该用户名已存在，请重新输入用户名！");
                flag = false;
            }
            else if (data == "false"){ //如果为空，则该用户名为未被占用，false
                $("#unm_tips").html("");
                flag = true;
            }
            else{
                $("#unm_tips").html("error");
                flag = false;
            }
        }
    })
}

//刷新验证码
function flushCode() {
    $("#codeimg").attr("src", "/code?date=" + new Date());
}

//判断密码两次输入是否一致
function confirmPassword() {
    if ($("#confirmPassword").val()==""){
        $("#psd_cfm_tips").html("确认密码不能为空");
        flag = false;
    }else{
        if ($("#password").val() != $("#confirmPassword").val()) {
            $("#psd_cfm_tips").html("两次密码输入不一致，请重新输入!");
            flag = false;
        } else
            $("#psd_cfm_tips").html("");
    }

}

//用户注册
function register() {
    let birth = $("#birth").val();
    if (birth==""||birth==null){
        $("#birth_tips").val("请选择您的生日！");
        flag = false;
    }
    if (flag) {
        let checkID = [];
        $("input[name='hobby']:checked").each(function (i) {
            checkID[i] = $(this).val();
        });
        let sex = $("input[name='sex']:checked").val();
        let hobby = JSON.stringify(checkID);
        console.log(hobby + typeof hobby);
        let userdata = {
            'username': $("#username").val(),
            'password': $("#password").val(),
            'phone': $("#phone").val(),
            'birth': birth,
            'sex': sex,
            'hobby': hobby,
            'intro': $("#intro").val(),
            'codeipt': $("#codeipt").val()
        };
        $.ajax({
            url: "/back/register",
            type: 'post',
            data: userdata,
            dataType: 'text',
            success: function (data) {
                console.log(data);
                if (data == 1) {
                    alert("注册成功！");
                    window.location.href = "/back/login";
                } else if (data == 0) {
                    $("#code_tips").html("验证码输入错误，请重新输入");
                    flushCode();
                }
            }
        })
    } else {
        alert("请先完善注册信息！")
    }

}